<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Swiper的切换</title>
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/certify.css">
	<script src="js/swiper.min.js"></script>

</head>

<body>
	<div id="certify">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="images/certify01.png" />
					<p>非常难得又值钱的认证证书1</p>
				</div>
				<div class="swiper-slide">
					<img src="images/certify02.png" />
					<p>深圳市优秀互联网企业认定证书2</p>
				</div>
				<div class="swiper-slide">
					<img src="images/certify03.png" />
					<p>质量管理体系认证荣誉证书3</p>
				</div>
				<div class="swiper-slide">
					<img src="images/certify04.png" />
					<p>计算机软件著作权登记证书4</p>
				</div>
				<div class="swiper-slide">
					<img src="images/certify05.png" />
					<p>增值电信业务经营许可证5</p>
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

	<script>
		certifySwiper = new Swiper('#certify .swiper-container', {
			watchSlidesProgress: true,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			loopedSlides: 5,
			autoplay: false,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			pagination: {
				el: '.swiper-pagination',
				//clickable :true,
			},
			on: {
				progress: function (progress) {  // wrapper的progress
					// 获取到 dom中 所有的 slid
					console.log("w ",progress);
					
					for (i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i); // 获取到 当前的的 slid ?
						var slideProgress = this.slides[i].progress; //获取到当前 slide的progress
						modify = 1;
						console.log("slideProgress",slideProgress);
						
						if (Math.abs(slideProgress) > 1) {
							modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
						}
						translate = slideProgress * modify * 260 + 'px';
						scale = 1 - Math.abs(slideProgress) / 5;
						zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
						slide.transform('translateX(' + translate + ') scale(' + scale + ')');
						slide.css('zIndex', zIndex);
						slide.css('opacity', 1);
						if (Math.abs(slideProgress) > 5) {
							slide.css('opacity', 0);
						}
					}
				},
				setTransition: function (transition) {
					for (var i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i)
						slide.transition(transition);
					}

				}
			}

		})
	</script>
</body>

</html>